import React, { Component } from 'react';
import { connect } from 'umi'
import PropTypes from 'prop-types'
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";


class RichTextEditor extends Component {
  static propTypes = {
    detail: PropTypes.string
  }

  constructor(props) {
    super(props);
    const { detail } = props.product
    const html = detail
    // const html = '<p>Hey this <strong>editor</strong> rocks 😀</p>';
    if (html){ // detail有值
      const contentBlock = htmlToDraft(html);
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const editorState = EditorState.createWithContent(contentState);
        this.state = {
          editorState,
        };
      }
    }else {
      this.state = {
        editorState: EditorState.createEmpty(), // 创建一个没有内容的编辑对象
      }
    }
  }


  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    }, () => {
      const { dispatch } = this.props
      const { editorState } = this.state
      const detail = draftToHtml(convertToRaw(editorState.getCurrentContent()))
      dispatch({
        type: 'product/save',
        payload: {
          detail
        }
      })
    });
  };

  // getDetail = () => {
  //   const { editorState } = this.state
  //   return draftToHtml(convertToRaw(editorState.getCurrentContent()))
  // }

  uploadImageCallBack = (file) => {
    return new Promise(
      (resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', ' /api1/manage/img/upload');
        // xhr.setRequestHeader('Authorization', 'Client-ID XXXXX');
        const data = new FormData();
        data.append('image', file);
        xhr.send(data);
        xhr.addEventListener('load', () => {
          const response = JSON.parse(xhr.responseText);
          const url = response.data.url // 得到图片的url
          const newUrl = url.replace('localhost', '120.55.193.14')
          // console.log(newUrl);
          resolve({data: {link: newUrl}});
        });
        xhr.addEventListener('error', () => {
          const error = JSON.parse(xhr.responseText);
          reject(error);
        });
      }
    );
  }

  render() {
    const { editorState } = this.state;
    return (
      <div>
        <Editor
          editorState={editorState}
          editorStyle={{border: '1px solid black', minHeight: 100, padding: 10}}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            image: { uploadCallback: this.uploadImageCallBack, alt: { present: true, mandatory: true } },
          }}
        />
      </div>
    );
  }
}

export default connect(({ product }) => ({
  ...product
}))(RichTextEditor);

